<template>
  <div>
    <a-drawer
      title="版型详情"
      placement="right"
      :closable="true"
      :maskClosable="false"
      :width="drawerWidth"
      :visible="visible"
      @close="close"
      style="height: 100%;overflow: auto;padding-bottom: 53px;"
      class="detail-drawer"
      id="version-drawer"
    >
      <a-spin :spinning="confirmLoading">
        <a-card :bordered="false">
          <a-row :gutter="36">
            <a-col :lg="11" :xs="24">
              <div class="skc-carousel" v-if="skcList.length > 0">
                <!-- Swiper -->
                <div class="thumb-example">
                  <!-- swiper1 -->
                  <swiper class="swiper gallery-top" :options="swiperOptionTop" ref="swiperTop">
                    <swiper-slide v-for="(item, index) in skcList" :key="index" class="slide">
                      <img :src="item ? item : 'https://img.bzhz.jnbygroup.com/cloth.png'" @click="bigImg(index, skcList)" style="cursor: pointer;" />
                    </swiper-slide>
                    <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
                    <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
                  </swiper>
                  <!-- swiper2 Thumbs -->
                  <swiper class="swiper gallery-thumbs" :options="swiperOptionThumbs" ref="swiperThumbs">
                    <swiper-slide v-for="(item, index) in skcList" :key="index" class="slide">
                      <img :src="item ? item : 'https://img.bzhz.jnbygroup.com/cloth.png'" />
                    </swiper-slide>
                  </swiper>
                </div>
              </div>
              <div class="skc-carousel" v-else>
                <img src="https://img.bzhz.jnbygroup.com/cloth.png" alt="" class="no-img" />
              </div>
            </a-col>
            <a-col :lg="13" :xs="24" style="position: relative;">
              <a-button type="primary" @click="edit" style="position: absolute;top:0;right:16px;">编辑</a-button>
              <a-descriptions title="商品信息" :column="2" class="info">
                <a-descriptions-item label="品牌">{{ productInfo.branCodeName }}</a-descriptions-item>
                <a-descriptions-item label="版型号">{{ productInfo.modelNumber }}</a-descriptions-item>
                <a-descriptions-item label="样衣号">{{ productInfo.sampleNo }}</a-descriptions-item>
                <a-descriptions-item label="大货号"
                  >{{ productInfo.spu ? productInfo.spu : '-' }} <a-button type="link" :disabled="productInfo.spu == null" @click="openDetail">查看</a-button></a-descriptions-item
                >
                <a-descriptions-item label="主料"
                  >{{ productInfo.mainIngredientName ? productInfo.mainIngredientName : '-'
                  }}<span v-if="productInfo.mainIngredientCode">（{{ productInfo.mainIngredientCode }}）</span></a-descriptions-item
                >
                <a-descriptions-item label="品类"> {{ productInfo.categoryName }}</a-descriptions-item>
                <a-descriptions-item label="小品名"> {{ productInfo.smallName }}</a-descriptions-item>
                <a-descriptions-item label="引用次数">{{ productInfo.citationNumber }}</a-descriptions-item>
                <a-descriptions-item label="销量">
                  {{ productInfo.soldNumber }}
                  <router-link :to="`/goods/sales-volume/${productInfo.modelNumber}`" target="_blank" style="margin-left: 8px;" v-if="productInfo.soldNumber > 0 && productInfo.soldNumber != null"
                    >查看</router-link
                  >
                  <span v-else style="color:rgba(0, 0, 0, 0.25);margin-left: 8px;">查看</span>
                </a-descriptions-item>
                <a-descriptions-item label="状态">{{ productInfo.isClosed == 1 ? '禁用' : '启用' }}</a-descriptions-item>
              </a-descriptions>
              <a-divider />
              <a-descriptions title="" :column="1" class="info">
                <a-descriptions-item :label="item.attrName" v-for="(item, index) in attrInfo" :key="index">
                  {{ item.valueName ? item.valueName : '-' }}&nbsp;&nbsp;
                  <template v-if="item.child && item.child.length > 0">
                    <span v-for="(childItem, childIndex) in item.child" :key="childIndex" style="color:#9d9d9d;">
                      {{ childItem.attrName }}：{{ childItem.valueName ? childItem.valueName : '-' }}；
                    </span>
                  </template>
                </a-descriptions-item>
              </a-descriptions>
            </a-col>
          </a-row>
          <div class="info-img" v-if="detailImg.length > 0 && productInfo.spu">
            <img :src="item" v-for="(item, index) in detailImg" :key="index" alt="" />
          </div>
          <div class="info-img no-info-img" v-else>
            <a-empty>
              <span slot="description"> 暂无详情图 </span>
            </a-empty>
          </div>
        </a-card>
        <a-back-top :target="targetFn" :visibilityHeight="300" />
      </a-spin>
    </a-drawer>
    <GoodInfoModal ref="goodInfoModal" :modalWidth="device !== 'mobile' ? '50vw' : '80vw'"></GoodInfoModal>
    <EditModal ref="editModal" @updateDetail="updateDetail"></EditModal>
    <BigImg :visibleImgs="visibleImgs" :imgList="bigImgList" :goToIndex="goToIndex" @closeBig="closeBig"></BigImg>
  </div>
</template>
<script>
import GoodInfoModal from '@views/box/components/GoodInfoModal'
import EditModal from './EditModal'
import BigImg from '@/views/box/components/UserMsg/bigImg'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
import { versionLibQueryDetail } from '@/api/goods/index'
import { mixinDevice } from '@/utils/mixin.js'
export default {
  mixins: [mixinDevice],
  components: {
    Swiper,
    SwiperSlide,
    GoodInfoModal,
    EditModal,
    BigImg
  },
  props: {
    /*  goodsInfo: {
      type: Object,
      default: null,
      required: false
    },
    permisTree: {
      type: Array,
      default: null,
      required: false
    },
    originTreeList: {
      type: Array,
      default: null,
      required: false
    } */
  },
  data() {
    return {
      id: '',
      skcList: [],
      zipImg: '',
      productInfo: {},
      attrInfo: [],
      detailImg: [],
      confirmLoading: true,
      swiperOptionTop: {
        loop: false,
        loopedSlides: 5, // looped slides should be the same
        spaceBetween: 10,
        // 左右两边的点击事件
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      },
      swiperOptionThumbs: {
        loop: false, // 是否可循环
        loopedSlides: 5, // looped slides should be the same
        spaceBetween: 10, // 缩略图之间的间隙大小
        centeredSlides: true, // 大图对应的缩略图位置显示在中间
        slidesPerView: 5, // 每一页显示下方缩略图的数量，auto ：自动显示所有数量；输入number（如1、2、3等）则是手动定义显示的数量
        touchRatio: 0.2, // 触控比例，可理解为拖动缩略图的距离，默认值为1
        slideToClickedSlide: true //点击其他缩略图可跳转
      },
      drawerWidth: 1100,
      visible: false,
      showEdit: false,
      visibleImgs: false,
      bigImgList: [],
      goToIndex: 0
    }
  },
  methods: {
    async show(record) {
      console.log(this.device)
      this.drawerWidth = this.device !== 'mobile' ? '70vw' : '90vw'
      this.id = record.id
      this.confirmLoading = true
      this.visible = true
      this.productInfo = {
        modelNumber: record.modelNumber,
        sampleNo: record.sampleNo
      }
      await this.fetchData(record.id)
      this.confirmLoading = false
      if (this.skcList.length > 0) this.handleSwiper()
    },
    close() {
      this.visible = false
      this.productInfo = {}
      this.attrInfo = []
      this.detailImg = []
      this.skcList = []
    },
    fetchData(id) {
      let data = {
        requestData: {
          id: id
        }
      }
      return versionLibQueryDetail(data).then(res => {
        console.log(res)
        if (res.code == 0) {
          Object.assign(this.productInfo, res.data)
          let attrInfo = [
            res.data.degreeOfFit,
            res.data.bodySize,
            res.data.collar,
            res.data.shoulderType,
            res.data.sleeveType,
            res.data.sleeveLength,
            res.data.clothLength,
            res.data.pantsType,
            res.data.pantsLength,
            res.data.skirtsType,
            res.data.skirtsLength,
            res.data.waistShape1,
            res.data.waistShape2
          ]
          this.attrInfo = attrInfo.filter(item => item != null)
          console.log(this.attrInfo)
          if (this.productInfo.spu) {
            this.detailImg = res.data.detailImgs ? res.data.detailImgs.split(',') : []
          }

          // if (res.data.pics) {
          // this.skcList = res.data.pics.split(',')
          if (res.data.mainPic) {
            this.skcList = []
            if (res.data.pics) {
              this.skcList = res.data.pics.split(',')
            }
          } else {
            this.skcList = [
              `https://bzhz.jnbygroup.com/jnbyimages/${res.data.brand}/skc/${res.data.skc_id}.png`,
              `https://bzhz.jnbygroup.com/jnbyimages/back/${res.data.brand}/skc/${res.data.skc_id}.png`
            ]
          }

          this.$nextTick(() => {
            if (this.skcList.length > 0) {
              const swiperTop = this.$refs.swiperTop.$swiper
              const swiperThumbs = this.$refs.swiperThumbs.$swiper
              swiperTop.controller.control = swiperThumbs
              swiperThumbs.controller.control = swiperTop
            }
          })
          // }
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    openDetail() {
      this.$refs.goodInfoModal.show(this.productInfo.productId)
    },
    // swiper
    handleSwiper() {
      this.$nextTick(() => {
        const swiperTop = this.$refs.swiperTop.$swiper
        const swiperThumbs = this.$refs.swiperThumbs.$swiper
        swiperTop.controller.control = swiperThumbs
        swiperThumbs.controller.control = swiperTop
      })
    },
    edit() {
      // this.showEdit = true
      let self = this
      this.$refs.editModal.show(this.productInfo, this.attrInfo)
      // setTimeout(function() {
      //   self.$refs.editModal.show(self.productInfo, self.attrInfo)
      // }, 200)
    },
    async updateDetail() {
      this.confirmLoading = true
      await this.fetchData(this.id)
      this.confirmLoading = false
    },
    // 查看大图
    bigImg(index, list) {
      this.visibleImgs = true
      this.goToIndex = index
      this.bigImgList = list
    },
    // 关闭大图弹窗
    closeBig(value) {
      this.visibleImgs = value
    },
    targetFn() {
      return document.querySelector('#version-drawer .ant-drawer-wrapper-body')
    }
  }
}
</script>
<style lang="less" scoped>
.detail-drawer {
  /deep/ .ant-drawer-body {
    padding: 0;
  }
}

.info {
  // padding-top: 24px;
  /deep/ .ant-descriptions-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 12px;
  }
}
.skc-carousel {
  .carousel-imgs {
    width: 100%;
    overflow: hidden;
    img {
      height: 80%;
      width: 80%;
      object-fit: scale-down;
      margin: 0 auto;
    }
  }
  .dots-imgs {
    width: 50px;
    height: 50px;
    border: 1px solid #cdcdcd;
    padding: 5px;
  }
  .slick-next::before {
    content: '';
  }
  .slick-prev::before {
    content: '';
  }
  .custom-slick-arrow {
    width: 25px;
    height: 25px;
    font-size: 25px;
    color: rgb(116, 116, 116);
    background-color: transparent;
    opacity: 1;
    z-index: 2;
  }
  /deep/ .slick-dots-bottom {
    bottom: 0px;
    height: initial;
    display: flex !important;
    width: 100%;
    overflow: hidden;
    padding: 0 24px;
    overflow-x: auto;
    li {
      margin: 0 5px;
    }
  }
  .no-img {
    width: 90%;
    object-fit: scale-down;
    margin: 0 auto;
  }
}
.info-img {
  padding-top: 48px;
  width: 100%;
  img {
    display: block;
    margin: 0 auto;
    max-width: 800px;
  }
}
.no-info-img {
  padding-top: 96px;
}
// tags
.tags-list {
  padding-left: 0;
  li {
    list-style-type: none;
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.85);
    line-height: 20px;
    width: 100%;
    .tags {
      width: 100%;
      display: flex;
      justify-content: space-between;
      p {
        display: flex;
        width: 92%;
      }
      .title {
        width: 80px;
        display: block;
      }
      .content {
        width: calc(100% - 80px);
      }
      .ant-tag {
        margin-bottom: 8px;
      }
    }
  }
}
.tag-box {
  display: block;
  margin-top: 100px;
  margin-left: 24px;
  .tag-title {
    font-size: 18px;
  }
  div {
    span {
      font-size: 14px;
      line-height: 30px;
      padding: 0 12px;
    }
  }
}
.thumb-example {
  height: 500px;
  // background-color: #383838;

  // swiper
  .swiper-slide {
    background-size: cover;
    background-position: center;

    &.gallery-top {
      height: 80%;
      width: 100%;
    }
    &.gallery-thumbs {
      height: 20%;
      box-sizing: border-box;
      padding: 1rem 0;
    }
    &.gallery-thumbs .swiper-slide {
      width: 25%;
      height: 100%;
      opacity: 0.4;
    }
  }
  .gallery-thumbs .swiper-slide-active {
    opacity: 1;
  }
  .swiper-button-prev,
  .swiper-button-next {
    // --swiper-theme-color: #ff6600; /* 设置Swiper风格 */
    --swiper-navigation-color: #1890ff; /* 单独设置按钮颜色 */
    // --swiper-navigation-size: 30px; /* 设置按钮大小 */
  }
}
.gallery-top {
  height: 80%;
  width: 100%;
  img {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    margin: 0 auto;
    display: block;
  }
}
.gallery-thumbs {
  height: 20%;
  box-sizing: border-box;
  padding: 1rem 0;
}
.gallery-thumbs .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 1px solid #cdcdcd;
  }
}

/* .gallery-thumbs {
  height: 20% !important;
  box-sizing: border-box;
  padding: 10px 30px;
  position: relative;
}

.gallery-thumbs .swiper-slide {
  // width: 25%;
  height: 100%;
  opacity: 1;
  img {
    width: 54px;
    height: 54px;
    object-fit: cover;
    border: 1px solid #cdcdcd;
  }
}
. */
// .swiper-button-next:after,
// .swiper-container-rtl .swiper-button-prev:after {
//   content: '';
// }
// .swiper-button-prev:after,
// .swiper-container-rtl .swiper-button-next:after {
//   content: '';
// }
// .swiper-button-prev,
// .swiper-button-next {
//   width: 40px;
//   height: 54px;
//   text-align: center;
//   margin-top: -27px;
//   font-size: 18px;
// }
// .swiper-button-prev {
//   left: 0px;
//   z-index: 5;
//   background-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(24, 144, 255, 0.2));
// }
// .swiper-button-next {
//   right: 0px;
//   z-index: 5;
//   background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(24, 144, 255, 0.2));
// }
</style>

